<!--
 * @Author: windys
 * @Description: 
 * @Date: 2022-02-14 15:52:30
-->
<template>
  <div class="article_page">
    <van-sticky>
      <!-- <van-nav-bar title="精彩直播">
        <template #right>
          <div class="nav_right" @click="handleHome">
            <van-icon name="manager"  />
          </div>
        </template>
      </van-nav-bar> -->

      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
        <van-swipe-item>
          <img
            src="http://vod.caihuapp.com/image/default/99D066E51B4A46039254CAC3B24B395A-6-2.jpeg"
            alt=""
            srcset=""
            @click="handleLlink"
          />
        </van-swipe-item>
        <van-swipe-item>
          <img
            src="http://vod.caihuapp.com/image/default/49FC12ECE5BA41C693736DDFE5EFE9E4-6-2.jpg"
            alt=""
            srcset=""
          />
        </van-swipe-item>
        <van-swipe-item>
          <img
            src="http://vod.caihuapp.com/image/default/5F37F5C56E09440EBCEA0DE360857D8D-6-2.jpg"
            alt=""
            srcset=""
          />
        </van-swipe-item>
      </van-swipe>

      <div class="tab">
        <van-tag
          type="primary"
          size="large"
          style="margin: 0 0px"
          :plain="query.marketCode != ''"
          @click="handleChaneType('')"
          >推荐</van-tag
        >
        <van-tag
          type="primary"
          size="large"
          style="margin: 0 20px"
          :plain="query.marketCode != '011'"
          @click="handleChaneType('011')"
          >财经</van-tag
        >
      </div>
    </van-sticky>
    <van-list
      v-model:loading="loading"
      :finished="finished"
      finished-text="没有更多了"
      @load="onLoad"
    >
      <van-grid :border="false" :column-num="2" :gutter="-10" clickable>
        <van-grid-item
          v-for="item in list"
          :key="item.liveId"
          @click="handleClickLive(item)"
        >
          <div class="list_item">
            <div class="item_cover">
              <img :src="item.coverUrl" alt="" srcset="" />
              <i class="iconfont icon-ziyuanxhdpi" v-if="item.isPwd === 1"></i>
              <i
                class="iconfont icon-live-text"
                v-if="item.status === 2"
                style="color: #f8ba0c"
              ></i>
              <i
                class="iconfont icon-zhibohuifang-copy"
                v-if="item.isPlayBack == 1"
                >回放</i
              >
            </div>
            <div class="title">{{ item.themeName }}</div>
            <div class="item_footer">
              <span v-if="item.vipRoom == true" style="color: #ff8100"
                >VIP专属</span
              >
              <span v-else>
                <span
                  v-if="item.isCharge == 0 && item.vipRoom === false"
                  style="color: #ff8100"
                  >免费</span
                >

                <span v-if="item.isCharge > 0">{{ item.originPrice }}金石</span>
                <span v-if="item.isCharge > 0">
                  <i class="iconfont icon-VIP1"></i>
                  <span style="margin-left: 5px; color: red">{{
                    item.price > 0 ? `${item.price}金石` : "免费"
                  }}</span>
                </span>
              </span>
            </div>
          </div>
        </van-grid-item>
      </van-grid>
    </van-list>
  </div>

  <payDialog ref="payDialog" />
  <pwdDialog ref="pwdDialog" @handleCheckRoomPwdSucc="handleJumpToRoom" />
</template>



<script >
import { defineComponent, ref, reactive } from "vue";
import { useRoute, useRouter } from "vue-router";
import storage from "@/utils/storage";
import { getLiveList, checkLiveIsPay, checkLivePwd } from "@/api/live";
import { encruption } from "@/utils/index";
import payDialog from "./payDialog.vue";
import pwdDialog from "./pwdDialog.vue";
import { Toast, Dialog, Notify } from "vant";
export default defineComponent({
  components: {
    payDialog,
    pwdDialog,
  },
  setup() {
    const router = useRouter();
    const route = useRoute();
    const handleHome = () => {
      router.push("/my");
    };

    const list = ref([]);
    const loading = ref(false);
    const finished = ref(false);

    const user = ref(
      JSON.parse(storage.getStorage("v3_userinfo_mobile")) || null
    );

    const query = reactive({
      pageIndex: 0,
      pageSize: 10,
      marketCode: "",
    });

    // 加载
    const onLoad = async () => {
      query.pageIndex++;
      const res = await getLiveList(query);
      if (res) {
        list.value = list.value.concat(res);
        loading.value = false;
        if (res.length <= 0) {
          console.log(111111);
          finished.value = true;
        } else {
          finished.value = false;
        }
      }
    };

    const handleChaneType = (v) => {
      query.marketCode = v;
      query.pageIndex = 0;
      list.value = [];
      onLoad();
    };

    // 点击直播间
    const payDialog = ref();
    const pwdDialog = ref();
    const handleClickLive = async (item) => {
      const res = await checkLiveIsPay({ liveId: item.liveId });
      // 登录情况下
      if (user.value) {
        // 需要密码
        if (res.isPwd === 1) {
          // 从本地缓存取出来密码 免输入
          const pwds = JSON.parse(storage.getStorage("pwd"));
          if (pwds[item.liveId]) {
            const pwsRes = await checkLivePwd({
              liveId: item.liveId,
              type: 1,
              pwd: encodeURIComponent(encruption(pwds[item.liveId])),
            });
            // 密码正确
            if (pwsRes === 1) {
              // handleJumpToRoom(item);
              // 已经失效
              if (res.isPayed === 2) {
                Dialog({ message: "该直播间已失效,请重新购买" }).then(() => {
                  payDialog.value.item = item;
                  payDialog.value.item.validDateTo = res.validDateTo;
                  payDialog.value.item.isPayed = res.isPayed;
                  payDialog.value.item.csTabId = res.csTabId;
                  payDialog.value.item.vipStatus = user.value.vipStatus;
                  payDialog.value.show = true;
                });
                return false;
              }

              // 已付费 并且不是vip专属的
              if (res.isPayed === 1 && res.isVipRoom !== 1) {
                handleJumpToRoom(item);
              }

              // VIP专属
              if (res.isVipRoom === 1) {
                if (user.value.vipStatus > 0) {
                  handleJumpToRoom(item);
                } else {
                  Notify({ type: "danger", message: "请开通VIP" });
                  return false;
                }
              }

              // 未付费 非会员未付费   或者会员未付费
              if (
                (res.isPayed === 0 &&
                  res.price > 0 &&
                  user.value.vipStatus <= 0) ||
                (res.isPayed === 0 &&
                  res.vipPrice > 0 &&
                  user.value.vipStatus > 0)
              ) {
                payDialog.value.item = item;
                payDialog.value.item.validDateTo = res.validDateTo;
                payDialog.value.item.isPayed = res.isPayed;
                payDialog.value.item.csTabId = res.csTabId;
                payDialog.value.item.vipStatus = user.value.vipStatus;
                payDialog.value.show = true;
              } else {
                handleJumpToRoom(item);
              }
            }
          } else {
            // 输入密码
            pwdDialog.value.show = true;
            pwdDialog.value.liveId = item.liveId;
            pwdDialog.value.item = item;
          }
        } else {
          // 不需要密码-----------------------------------------------------
          // 已经失效
          if (res.isPayed === 2) {
            Dialog({ message: "该直播间已失效,请重新购买" }).then(() => {
              payDialog.value.item = item;
              payDialog.value.item.validDateTo = res.validDateTo;
              payDialog.value.item.isPayed = res.isPayed;
              payDialog.value.item.csTabId = res.csTabId;
              payDialog.value.item.vipStatus = user.value.vipStatus;
              payDialog.value.show = true;
            });
            return false;
          }

          // 已付费 并且不是vip专属的
          if (res.isPayed === 1 && res.isVipRoom !== 1) {
            handleJumpToRoom(item);
          }

          // VIP专属
          if (res.isVipRoom === 1) {
            if (user.value.vipStatus > 0) {
              handleJumpToRoom(item);
            } else {
              Notify({ type: "danger", message: "请开通VIP" });
              return false;
            }
          }

          // 未付费 非会员未付费   或者会员未付费
          if (
            (res.isPayed === 0 && res.price > 0 && user.value.vipStatus <= 0) ||
            (res.isPayed === 0 && res.vipPrice > 0 && user.value.vipStatus > 0)
          ) {
            payDialog.value.item = item;
            payDialog.value.item.validDateTo = res.validDateTo;
            payDialog.value.item.isPayed = res.isPayed;
            payDialog.value.item.csTabId = res.csTabId;
            payDialog.value.item.vipStatus = user.value.vipStatus;
            payDialog.value.show = true;
            console.log(payDialog.value.item);
          } else {
            handleJumpToRoom(item);
          }
        }
      } else {
        // 未登录 只有免费并且没密码并且不是vip房间
        if (
          res.price === 0 &&
          res.vipPrice == 0 &&
          res.isPwd === 0 &&
          res.isVipRoom === 0
        ) {
          handleJumpToRoom(item);
        } else {
          Dialog.confirm({
            title: "提示",
            message: "该直播间需要登录后操作",
          })
            .then(() => {
              router.push("/login");
            })
            .catch(() => {});
        }
      }
    };
    // 跳转房间
    const handleJumpToRoom = (item) => {
      router.push({
        path: "/liveroom",
        query: {
          liveId: item.liveId,
          chatRoomId: item.chatRoomId,
          isPwd: item.isPwd,
          randomNum: Math.random().toFixed(6).slice(-6),
        },
      });
    };

    const handleLlink = () => {
      location.href =
        "https://open.95538.cn/wt/fxckh/views/phone_index.html?branchID=9290&brokerNo=00929000227891&fromhost=9ED67C93332F4D38A14C8B4653E48776";
    };
    return {
      pwdDialog,
      user,
      list,
      loading,
      finished,
      query,
      payDialog,
      onLoad,
      handleHome,
      handleChaneType,
      handleClickLive,
      handleJumpToRoom,
      handleLlink,
    };
  },
});
</script>


<style lang="scss" scoped>
.article_page {
  .nav_right {
    color: #fff;
    display: flex;
    span {
      line-height: 50px;
      margin-right: 5px;
    }
  }
  .tab {
    background: #fff;
    text-align: left;
    height: 40px;
    line-height: 40px;
    padding: 0 10px;
  }
  .list_item {
    overflow: hidden;
    width: 170px;
    height: 150px;
    .item_cover {
      width: 100%;
      height: 100px;
      overflow: hidden;
      border-radius: 5px;
      position: relative;

      img {
        width: 100%;
        height: 100%;
      }
      .icon-ziyuanxhdpi {
        position: absolute;
        z-index: 1;
        bottom: 5px;
        left: 5px;
        color: #c08f54;
      }
      .icon-live-text {
        position: absolute;
        z-index: 1;
        top: 5px;
        left: 5px;
        color: #ff0000;
      }
      .icon-zhibohuifang-copy {
        position: absolute;
        right: 5px;
        z-index: 10;
        top: 5px;
        border-radius: 5px;
        font-size: 8px;
        padding: 2px 3px;
        color: #ffffff;
        background: #003144;
      }
    }
    .title {
      font-size: 16px;
      color: #525050;
      text-align: left;
      padding: 5px 5px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .item_footer {
      display: flex;
      font-size: 6px;
      padding: 2px 5px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      color: #6b7683;
      span {
        display: flex;
      }
      .iconfont {
        font-size: 18px;
        color: #ff3e3e;
        position: relative;
        top: -2px;
        left: 6px;
        margin-right: 4px;
      }
    }
  }
}
.my-swipe .van-swipe-item {
  overflow: hidden;
  height: 200px;
  img {
    width: 100%;
    height: 100%;
  }
}
::v-deep(.van-hairline--bottom:after) {
  display: none;
}
.van-swipe {
  overflow: hidden;
  width: 95%;
  margin: 10px auto;
  border-radius: 8px;
  box-shadow: 0 12px 10px rgba(80, 79, 79, 0.247);
}
::v-deep(.van-sticky--fixed) {
  background: #ffffff;
}
</style>